<template>
	<view class="pad-16r">
		<!-- 地址编辑 -->
		<view class="item">
			<view class="border-col">地址信息</view>
			<view>
				<view class="between-center line-height-50">
					<view class="start-center">
						<view class="xin color-red">*</view>
						收货人
					</view>
					<input type="text" v-model="dataItem.name" placeholder="请输入收货人姓名" />
				</view>
				<view class="between-center line-height-50">
					<view class="start-center">
						<view class="xin color-red">*</view>
						电话号码
					</view>
					<input type="number" v-model="dataItem.phone" placeholder="请输入收货人电话号码" maxlength="11" />
				</view>
				<view class="between-center line-height-50">
					<view class="start-center">
						<view class="xin color-red">*</view>
						所在地区
					</view>
					<view v-if="dataItem.province" @click="show=true">
						{{dataItem.province}} {{dataItem.city}} {{dataItem.district}}
					</view>
					<view v-else class="text-placeholder" @click="show=true">请选择省市区(县乡镇) ></view>
				</view>
				<view class="between-center line-height-50">
					<view class="start-center">
						<view class="xin color-red">*</view>
						详细地址
					</view>
					<input type="text" v-model="dataItem.address" placeholder="请填写街道、小区、门牌号等" />
				</view>
				<view class="between-center line-height-50">
					<view class="start-center">
						设置默认地址
					</view>
					<u-switch v-model="status"></u-switch>
				</view>
			</view>
			<ButtonVue content="保存" @click="confirm"></ButtonVue>
		</view>
		<u-toast ref="uToast" />
		<u-picker v-model="show" mode="region" @confirm="regionChange"></u-picker>
	</view>
</template>

<script>
	import ButtonVue from '../../components/Button/Button.vue'
	import {
		patAddressAdd,
		patAddressUpdate
	} from '../../api/patAddress'
	export default {
		components: {
			ButtonVue
		},
		data() {
			return {
				dataItem: {},
				show: false,
				status: false,
			}
		},
		onLoad(e) {
			this.dataItem = JSON.parse(e.item)
		},
		methods: {
			confirm() {
				this.dataItem.status = this.status ? 1 : 0
				if (!this.dataItem.name) {
					this.$refs.uToast.show({
						title: '请输入收货人',
						type: 'primary',
					})
					return
				}
				if (!this.dataItem.phone) {
					this.$refs.uToast.show({
						title: '请输入电话号码',
						type: 'primary',
					})
					return
				}
				if (!this.dataItem.province) {
					this.$refs.uToast.show({
						title: '请选择所在地区',
						type: 'primary',
					})
					return
				}
				if (!this.dataItem.address) {
					this.$refs.uToast.show({
						title: '请输入详细地址',
						type: 'primary',
					})
					return
				}
				if (this.dataItem.id) {
					patAddressUpdate(this.dataItem).then(res => {
						this.toPage()
					})
				} else {
					patAddressAdd(this.dataItem).then(res => {
						this.toPage()
					})
				}
			},
			toPage() {
				uni.navigateTo({
					url: "/pages/User/AddressManage"
				})
			},
			regionChange(e) {
				this.dataItem.province = e.province.label
				this.dataItem.city = e.city.label
				this.dataItem.district = e.area.label
			}
		}
	}
</script>

<style scoped>
	uni-input {
		text-align: right;

		.uni-input-placeholder {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28upx;
			color: rgba(0, 0, 0, 0.24);
		}
	}

	.text-placeholder {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28upx;
		color: rgba(0, 0, 0, 0.24);
	}
</style>